<template>
	<view class="page home bgf7 c85">
		<image class="w-20 bg" src="/static/img/bg/bg.png"></image>
		<view class="aliC cff title pb16 rel" :style="{paddingTop: statusBar + 'px'}">经营分析</view>
		<view class="flex flexC flexB cff py8 px15 rel">
			<view class="flex1 aliC" @click="showShop()">
				<view>
					<text>{{selectShop.name}}</text>
					<image class="ml6 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</view>
			<picker class="flex1 aliC" mode="selector" range-key="name" :range="dateList" @change="selectDateChange">
				<view>
					<text>{{dateStr}}</text>
					<image class="ml6 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</picker>
			<!-- <picker class="flex1 aliC" mode="selector" :range="list">
				<view>
					<text>{{list[statusIndex+2].name}}</text>
					<image class="ml6 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</picker> -->
		</view>
		<scroll-view scroll-y class="list rel" :style="{height: 'calc(100vh - 246rpx - ' + statusBar +'px)'}">
			<view class="bgff flex flexC flexB flexW aliC mx15 rel r2 shadow">
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.totalAmount}}</view>
					<view class="c85 mt2">销售金额(元)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.profit}}</view>
					<view class="c85 mt2">收益金额(元)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.chargeAmount}}</view>
					<view class="c85 mt2">充值金额(元)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.totalOrder}}</view>
					<view class="c85 mt2">订单数(笔)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.refundAmount}}</view>
					<view class="c85 mt2">退款金额(元)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.totalBalance}}</view>
					<view class="c85 mt2">余额抵扣(元)</view>
				</view>
			</view>


			<view class="bgff flex flexC flexB flexW aliC mx15 mt10 rel r2 shadow">

				<view class="w32 py16">
					<view class="bold6 fs20 c00">0</view>
					<view class="c85 mt2">核销金额(元)</view>
				</view>

				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.totalUser}}</view>
					<view class="c85 mt2">总用户(人)</view>
				</view>
				<view class="w32 py16">
					<view class="bold6 fs20 c00">{{data.users}}</view>
					<view class="c85 mt2">新增用户(人)</view>
				</view>


			</view>

			<view class="c00 px15 py12 bgf6 mx15">
				<text class="c41 fs12 mr6">•</text>
				<text>最近七天订单趋势</text>
			</view>
			<view class="charts-box mx15 r2 py12 bgff">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
			<view class="c00 px15 py12 bgf6 mx15">
				<text class="c41 fs12 mr6">•</text>
				<text>{{dateList[dateIndex].name}}包厢销售</text>
			</view>
			<view class="bgff r2 mx15 px15 py4 shadow">
				<view v-for="(item,index) in rooms" :key="index" class="flex flexC c00 borb pt20 pb12">
					<text class="bg5f cff r50 mr7 aliC fs12">{{index+1}}</text>
					<text class="flex1">{{item.name}}</text>
					<text class="bold6">{{item.amount}}元</text>
				</view>
			</view>
			<tn-date-picker :beforeDateDisable="false" color="rgb(72,143,244)" :show="showPicker" :format="'yyyy-mm-dd'"
				:monthNum="7" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" @confirm="ed"
				@cancel="ed" />

		</scroll-view>

		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
		<tabbar></tabbar>
	</view>
</template>

<script>
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;

	import TnDatePicker from "@/components/tn-datepicker/tn-datepicker.vue";
	export default {
		components: {
			TnDatePicker,
		},
		data() {
			return {
				statusBar,
				dateIndex: 0,
				shopList: [],
				selectShop: null,
				data: null,
				showPicker: false,
				date: '',
				value: [],
				dateList: [{
						name: '今天'
					},
					{
						name: '昨天'
					},
					{
						name: '本周'
					},
					{
						name: '上周'
					},
					{
						name: '本月'
					},
					{
						name: '上月'
					},
					{
						name: '自定义'
					}
				],
				dateStr:'今天',
				chartData: {},
				rooms: [],
				startDate:'',
				endDate:'',
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					dataPointShape: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					// enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: false,
						axisLine: false
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
			}
		},
		onLoad() {
			
			
			var start = this.getRecentMonth_Date(6);
		
			this.value = start;
			console.info("====date Str==="+JSON.stringify(start));
			this.getShopList();
			
			

		},
		methods: {
			
			getRecentDay_Date: function (n) {
			  var dd = new Date();
			  dd.setDate(dd.getDate() + n); //获取n天后的日期
			  var y = dd.getFullYear();
			  var m = dd.getMonth() + 1; //获取当前月份的日期
			  if(m <10){
				  m = "0"+m;
			  }
			  var d = dd.getDate();
			  if(d <10) d = "0"+d;
			  let day = y + '-' + m + '-' + d;
			  console.log(day);
			  return day;
			},
			getRecentMonth_Date: function (n) {
			  const datenow = new Date();
			  
			  var m = datenow.getMonth() + 1;
			  var d =  datenow.getDate();
			  if(m <10) {
				  m = "0"+m;
			  }
			  if(d <10) d = "0"+d;
			  const dateend =
			    datenow.getFullYear().toString() +
			    '-' +m +
			    '-' +d ;
			  	datenow.setMonth(datenow.getMonth() - n);
			  	let dyear = datenow.getFullYear();
			  	let dmonth = datenow.getMonth() + 1;
			  	dmonth = dmonth < 10 ? "0" + dmonth : dmonth;
			  	let dday = datenow.getDate();
				dday = dday < 10 ? "0" + dday : dday;
				
			  	const datestart =
			   	 dyear.toString() + '-' + dmonth + '-' + dday;
			 
				var result = new Array();
				result.push(datestart);
				result.push(dateend);
				
			  	return result;
			},
			

			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this.date = e.value;
					this.dateStr = e.value;
				
					//选择的值
					console.log('value => ' + e.value[0]);
					console.log('value =>2 ' + e.value[1]);
					
					this.startDate = e.value[0];
					this.endDate = e.value[1];
					this.getIndex();
					this.getDataOrder();
					this.getRoom();
					//原始的Date对象
				}
			},

			selectDateChange(e) {
				console.info(e);
				this.dateIndex = e.detail.value;
				if (this.dateIndex == 6) {
					this.showPicker = true;
				} else {
					this.dateStr = this.dateList[this.dateIndex].name;
					this.getIndex();
					this.getDataOrder();
					this.getRoom();
				}

			},

			getRoom() {
				let param = {
					shop_id: this.selectShop.id,
					date: this.dateList[this.dateIndex].name,
					startDate:this.startDate,
					endDate:this.endDate
				};
				let that = this;
				this.$api.dataRoom(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.rooms = res.data;
					} else {

					}
				})
			},

			getIndex() {
				let param = {
					shop_id: this.selectShop.id,
					date: this.dateList[this.dateIndex].name,
					startDate:this.startDate,
					endDate:this.endDate
				};
				let that = this;
				this.$api.dataIndex(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.data = res.data;

					} else {

					}
				})
			},

			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {
							that.selectShop = that.shopList[0];
							that.getIndex();
							that.getDataOrder();
							that.getRoom();
						}
					} else {

					}
				})
			},

			onClose() {
				this.$refs.shopPicker.close();
			},
			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				this.getIndex();
				this.getDataOrder();
				this.getRoom();

			},

			getDataOrder() {


				let param = {
					shop_id: this.selectShop.id,
					startDate:this.startDate,
					endDate:this.endDate
				};
				let that = this;
				this.$api.dataOrder(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {

						let dd = {
							categories: res.data.key,
							series: [{
								name: "订单金额",
								data: res.data.value
							}]
						};
						that.chartData = dd;
					} else {

					}
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.down {
			width: 36rpx;
			height: 36rpx;
		}

		.bg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
		}

		.bg5f {
			width: 36rpx;
			height: 36rpx;
			background-color: #5FA0F5;
		}

		.w32 {
			width: 33%;
		}

		.charts-box {
			height: 200px;
		}
	}
</style>